<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Blog后台</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">

    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/wangEditor.js}"></script>
</head>
<body style="background-color:#eee;">

<div th:replace="~{commons/admin/topbar::top-bar}"></div>


<div class="row">
    <!--    引入共有侧边栏-->
    <div th:replace="~{commons/admin/leftbar::left-bar}"></div>
    <!--欢迎页-->
    <div class="col-xs-12 col-sm-9 col-md-10 pull-right" style="background-color:#FFFFFF;margin-top: 60px;">
        <div class="row bg-info text-center">
            <h4>创作中心</h4>
        </div><br>
        <div class="container-fluid" style="min-height: 800px;">


            <form th:action="@{/admin/updateArticle}" method="post">

                <input type="hidden" name="id" th:value="${article.getId()}">

                <div class="form-group">
                    <label>标题：&nbsp;</label>
                    <input type="text" th:value="${article.getArticleTitle()}" name="title" autofocus="" class="form-control input-lg" placeholder="文章标题" required>
                </div>

                <div class="form-group">
                    <label>作者：&nbsp;</label>
                    <input type="text" th:value="${article.getAuthor()}" name="author" autofocus="" class="form-control input-lg" placeholder="作者" required>
                </div>

                <label>内容：</label>
                <!--富文本编辑器-->
                <div id="div1">
                </div>
                <!--隐藏域接收富文本编辑器传来的内容-->
                <div class="form-group">
                    <input type="hidden" name="content" id="content" class="form-control input-lg">
                </div>

                <div class="form-group">
                    <label>标签：</label>
                    <input type="text" th:value="${article.getArticleTags()}" name="tags" class="form-control input-lg" placeholder="标签">
                    <p class="help-block">关键词之间用逗号<span style="color: red;font-size: 20px;">“,”</span>隔开</p>
                </div>

                <div class="form-group">
                    <label>类型：</label>
                    <input type="text" th:value="${article.getArticleType()}" name="type" class="form-control input-lg" placeholder="文章类型">
                </div>

                <div class="form-group">
                    <label>喜欢数：</label>
                    <input type="text" th:value="${article.getLikes()}" name="likes" class="form-control input-lg" placeholder="文章类型">
                </div>

                <div class="text-center">
                    <button type="submit" class="btn btn-default" >保存</button>
                </div>
            </form>




        </div><br>
        <div class="pull-right"><a href="" target="_blank">软件18-2班第三组</a>&nbsp;&nbsp;</div>   </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    var E = window.wangEditor;
    var editor = new E('#div1');

    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    editor.create();

    function giveContent(){
        //获取富文本编辑器的文本内容
        var content = editor.txt.html();
        $("#content").attr("value",content);
    }
    //将富文本编辑器的内容同步传送至隐藏域中
    setInterval(giveContent,50);
    //关闭表情功能
    $(".w-e-icon-happy")[0].hidden=true;

    //设置内容
    editor.txt.html([[${article.getArticleContent()}]]);
</script>

</html>